<template>
  <!-- <div id="echartsView" class="className"/> -->
  <div>
    <div id="studentage" style="width:100%; height:500px"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  props: {
    dateArray: {
      type: Array,
      default() {
        return []
      }
    },
    dataArray: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('studentage'))
      this.chart.setOption({
        backgroundColor: "#fff",
        "title": {
          "text": "学生每日登录次数趋势",
          x: "4%",
          top: 20,
          textStyle: {
            color: '#333',
            fontSize: '22'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',
          },
        },
        "tooltip": {
          "trigger": "axis",
          "axisPointer": {
            "type": "shadow",
            textStyle: {
              color: "#fff"
            }

          },
        },
        "grid": {
          "borderWidth": 0,
          "top": 110,
          "bottom": 95,
          textStyle: {
            color: "#fff"
          }
        },
        "legend": {
          x: 'right',
          top: '11%',
          textStyle: {
            color: '#999',
          },
        },
        "calculable": true,
        "xAxis": [{
          "type": "category",
          "axisLine": {
            lineStyle: {
              color: '#999'
            }
          },
          "splitLine": {
            "show": false
          },
          "axisTick": {
            "show": false
          },
          "splitArea": {
            "show": false
          },
          "axisLabel": {
            "interval": 0,

          },
          "data": this.dateArray,
        }],
        "yAxis": [{
          "type": "value",
          "splitLine": {
            "show": false
          },
          "axisLine": {
            lineStyle: {
              color: '#999'
            }
          },
          "axisTick": {
            "show": false
          },
          "axisLabel": {
            "interval": 0,

          },
          "splitArea": {
            "show": false
          },

        }],
        "dataZoom": [{
          "show": true,
          "height": 30,
          "xAxisIndex": [
            0
          ],
          bottom: 30,
          "start": 10,
          "end": 80,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: "#d3dee5",
          },
          textStyle: {
            color: "red"
          },
          borderColor: "#90979c"
        }, {
          "type": "inside",
          "show": true,
          "height": 15,
          "start": 1,
          "end": 35
        }],
        "series": [{
        //   "name": "女",
        //   "type": "bar",
        //   "stack": "总量",
        //   "barMaxWidth": 35,
        //   "barGap": "10%",
        //   "itemStyle": {
        //     "normal": {
        //       "color": "rgba(255,144,128,1)",
        //       "label": {
        //         "show": true,
        //         "textStyle": {
        //           "color": "#fff"
        //         },
        //         "position": "insideTop",
        //         formatter: function (p) {
        //           return p.value > 0 ? (p.value) : '';
        //         }
        //       }
        //     }
        //   },
        //   "data": this.femaleNumArray,
        // },
        // {
        //   "name": "男",
        //   "type": "bar",
        //   "stack": "总量",
        //   "itemStyle": {
        //     "normal": {
        //       "color": "rgba(0,191,183,1)",
        //       "barBorderRadius": 0,
        //       "label": {
        //         "show": true,
        //         "position": "top",
        //         formatter: function (p) {
        //           return p.value > 0 ? (p.value) : '';
        //         }
        //       }
        //     }
        //   },
        //   "data": this.maleNumArray
        // }, {
          "name": "总数",
          "type": "line",
          "stack": "总量",
          symbolSize: 10,
          symbol: 'circle',
          "itemStyle": {
            "normal": {
              "color": "#4b5cc4",
              "barBorderRadius": 0,
              "label": {
                "show": true,
                "position": "top",
                formatter: function (p) {
                  return p.value > 0 ? (p.value) : '';
                }
              }
            }
          },
          "data": this.dataArray
        }
        ]
      })
    }
  }
}
</script>
